<template>
  <!--模板-->
  <h1>测试数组</h1>
  arr1：{{ list }}<br>
  <hr>
  <el-button type="" @click="set1">深层，改元素</el-button> <br>
  <el-button type="" @click="set2">深层，整体赋值</el-button>
  <hr>
</template>


<script setup lang="ts" generic="T extends {name: string}">
  import { reactive, watch } from 'vue'

  import {
    BaseArray,
    useList
  } from '../../../lib/main'
  
  let index = 1

  const list = useList([{
    name: '深层初始'
  }])
   
  console.log('list', list)

  watch(list, (val1, val2) => {
    console.log('watch -- arr1 ：', val1, val2)
  })

   
  const set1 = () => {
    list[0] = {name: '变更' + index++}
  }
  
  const set2 = () => {
    list.value =[ {name: '整体赋值' + index++}]
  }

</script>